<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>制表工具</title>
    <style>
        table {
            border-collapse: collapse;
            text-align: left;
            font-weight: bold;
            margin-left: 0%;
            width: 100%;
        }
        
        td,
        th {
            border: 1px solid black;
            height: 40px;
            width: 50%;
        }
        
        .mr30 {
            margin-left: 30%;
            position: relative;
            padding: 0;
        }
        
        .mr10 {
            margin-left: 11%;
            position: relative;
            padding: 0;
        }
        
        .mr20 {
            margin-left: 0%;
            position: relative;
            padding: 0;
            font-size: 0.8em;
        }
        
        .text-center {
            text-align: center;
        }
        
        .w40 {
            width: 30%;
        }
        
        .w60 {
            width: 60%;
        }
        
        .txtn {
            font-weight: normal;
        }
        
        li {
            list-style-type: none;
            margin-bottom: 16em;
            padding-top: 3em;
        }
        
        ul {
            padding: 0;
            margin: 0;
        }
    </style>
</head>

<body>
    <ul id="list" style="width:80%;margin-left:10%;margin-right:10%;">
        <li v-for="item in items">
            <div style="margin-top:1em;">
                <div style="font-size:1.5em;">监管棉花公证检验品质检验样品交接卡（卡号： <span style="margin-right:0px;float:right;">）</span></div>
                <table>
                    <tr>
                        <td class="w40"><span class="mr30 txtn">加工批号</span></td>
                        <td class="text-center" style="font-size:1.5em">{{item.batch_number}}</td>
                    </tr>
                    <tr>
                        <td class="w40"><span class="mr30 txtn">棉花加工企业</span></td>
                        <td class="text-center">{{item.processing_enterprise}}</td>
                    </tr>
                    <tr>
                        <td class="w40"><span class="mr30 txtn">仪器化公检实验室</span></td>
                        <td class="text-center">{{item.lab}}纤维检验所</td>
                    </tr>
                    <tr>
                        <td class="w40"><span class="mr30 txtn">包装袋号</span></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td class="w40"><span class="mr30 txtn">样品数</span></td>
                        <td class="text-center" style="font-size:1.5em">96</td>
                    </tr>
                    <tr>
                        <td colspan="2"><span class="mr10 txtn">备注:</span></td>

                    </tr>
                </table>
                <div class="mr20" style="margin-top:1em"><span>在库机构品质检验样品取样人员：马庆<span><span style="margin-left:20%;">仪器化公检实验室样品管理员：</span></div>
                <div class="mr20">交接时间：<span style="letter-spacing:2em;"> 年月日时分</span> </div>
                <div class="mr20">交接地点：新疆库尔勒永兴物流有限公司</div>
            </div>
            <div style="border:0.1px dashed;margin-top:7em;margin-bottom:4em; width:100%;margin-left:0%"></div>

            <div style="padding-top:2em;">
                <div style="font-size:1.5em;">监管棉花公证检验品质检验样品交接卡（卡号： <span style="margin-right:0px;float:right;">）</span></div>
                <table>
                    <tr>
                        <td class="w40"><span class="mr30 txtn">加工批号</span></td>
                        <td class="text-center" style="font-size:1.5em">{{item.batch_number}}</td>
                    </tr>
                    <tr>
                        <td class="w40"><span class="mr30 txtn">棉花加工企业</span></td>
                        <td class="text-center">{{item.processing_enterprise}}</td>
                    </tr>
                    <tr>
                        <td class="w40"><span class="mr30 txtn">仪器化公检实验室</span></td>
                        <td class="text-center">{{item.lab}}纤维检验所</td>
                    </tr>
                    <tr>
                        <td class="w40"><span class="mr30 txtn">包装袋号</span></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td class="w40"><span class="mr30 txtn">样品数</span></td>
                        <td class="text-center" style="font-size:1.5em">90</td>
                    </tr>
                    <tr>
                        <td colspan="2"><span class="mr10 txtn">备注:</span></td>

                    </tr>
                </table>
                <div class="mr20" style="margin-top:1em"><span>在库机构品质检验样品取样人员：马庆<span><span style="margin-left:20%;">仪器化公检实验室样品管理员：</span></div>
                <div class="mr20">交接时间：<span style="letter-spacing:2em;"> 年月日时分</span> </div>
                <div class="mr20">交接地点：新疆库尔勒永兴物流有限公司</div>
                <div style="padding-top:1em;font-size:1.5em;text-align:right;">{{item.serial_number}}</div>
            </div>
        </li>
    </ul>
</body>

<script src="../../vue/vue.js"></script>
<script>
    let data = JSON.parse(localStorage.getItem('trans'));
    let vm = new Vue({
            el: '#list',
            data: {
                items: data
            }
        }

    );
</script>



</html>